import { Card } from 'antd'
import { render } from 'react-dom'

import {
  triggerXhrButNoDomain,
  triggerXhrWithNoQuery,
  triggerXhrWithQuery,
  triggerXhrWithQueryButNoDomain,
} from './ajax'
import { triggerSlardar } from './event'
import { triggerCapture, triggerCaptureErrorEvent, triggerCapturePromiseRejection } from './exception'
import {
  triggerClick,
  triggerConfigWebId,
  triggerEmitCounter,
  triggerHashChange,
  triggerHistoryGo,
  triggerHistoryForward,
  tirggerHistoryBack,
  triggerPushState,
  triggerReplaceState,
} from './path'

const $root = document.querySelector('#app')

const App = () => {
  return (
    <div className="app">
      <style>
        {`* {
          margin: 0;
          padding: 0
        }`}
      </style>
      <Card>
        <h1>Slardar SDK</h1>
        <p>Testing by cypress</p>
        <button id="trigger-click" onClick={triggerClick}>
          trigger click
        </button>
        <button id="trigger-slardar-event" onClick={triggerSlardar}>
          trigger slardar event
        </button>
        <div id="trigger-pageview">
          <button id="trigger-hash-change" onClick={triggerHashChange}>
            trigger-hash-change
          </button>
          <button id="trigger-history-go" onClick={triggerHistoryGo}>
            trigger-history-go
          </button>
          <button id="trigger-history-forward" onClick={triggerHistoryForward}>
            trigger-history-forward
          </button>
          <button id="trigger-history-back" onClick={tirggerHistoryBack}>
            trigger-history-back
          </button>
          <button id="trigger-push-state" onClick={triggerPushState}>
            trigger-push-state
          </button>
          <button id="trigger-replace-state" onClick={triggerReplaceState}>
            trigger-replace-state
          </button>
          <button id="trigger-config-webid" onClick={triggerConfigWebId}>
            trigger config webid
          </button>
          <button id="trigger-emit-counter" onClick={triggerEmitCounter}>
            trigger emit counter
          </button>
        </div>
        <div id="trigger-ajax">
          <button id="trigger-xhr-with-query-but-no-domain" onClick={triggerXhrWithQueryButNoDomain}>
            trigger-xhr-with-query-but-no-domain
          </button>
          <button id="trigger-xhr-with-query" onClick={triggerXhrWithQuery}>
            trigger-xhr-with-query
          </button>
          <button id="trigger-xhr-with-no-query" onClick={triggerXhrWithNoQuery}>
            trigger-xhr-with-no-query
          </button>
          <button id="trigger-xhr-but-no-domain" onClick={triggerXhrButNoDomain}>
            trigger-xhr-but-no-domain
          </button>
          <button id="trigger-capture" onClick={triggerCapture}>
            trigger-capture
          </button>
          <button id="trigger-capture-error-event" onClick={triggerCaptureErrorEvent}>
            trigger-capture-error-event
          </button>
          <button id="trigger-capture-promise-rejection" onClick={triggerCapturePromiseRejection}>
            trigger-capture-promise-rejection
          </button>
        </div>
        <div
          id="trigger-slardar-scroll-outer"
          style={{
            height: 300,
            width: '100%',
            border: '1px solid #333',
            overflow: 'auto',
          }}
        >
          <div id="trigger-slardar-scroll-inner" style={{ height: 300, width: '100%' }} />
        </div>
        <div id="trigger-slardar-scroll-long-list" style={{ height: 300, width: '100%', border: '1px solid #333' }} />
      </Card>
    </div>
  )
}

const delay = new URL(location.href).searchParams.get('delay')
if (delay) {
  setTimeout(() => {
    render(<App />, $root!)
  }, parseInt(delay))
} else {
  render(<App />, $root!)
}
